<body class="iframe">
    <div class="cate">
        <div class="frame-header">
            <h2><i class="layui-icon">&#xe705;</i>收件管理</h2>
        </div>
        <h4 class="layui-bg-dark frame-title"><i class="layui-icon">&#xe65f;</i>添加分组</h4>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">分组名</label>
                <div class="layui-input-inline">
                    <input type="text" name="type" required lay-verify="required" placeholder="请填写分组名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sort" required lay-verify="required|number"  autocomplete="off" class="layui-input" value="0">
                </div>
                <div class="layui-form-mid layui-word-aux">值越大,越靠前(0-99)</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">分组简介</label>
                <div class="layui-input-block">
                    <textarea name="brief" placeholder="请填写分组简介" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addcate">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <h4 class="layui-bg-dark frame-title"><i class="layui-icon">&#xe65f;</i>分组列表</h4>
        <div class="data-table">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>分类名</th>
                        <th>简介</th>
                        <th>排序</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div id="edit">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">分组名</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="tid" class="typeid"/>
                    <input type="text" name="type" required lay-verify="required" placeholder="请填写分组名" autocomplete="off" class="layui-input typename">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sort" required lay-verify="required|number"  autocomplete="off" class="layui-input typesort" value="0">
                </div>
                <div class="layui-form-mid layui-word-aux">值越大,越靠前(0-99)</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">分组简介</label>
                <div class="layui-input-block">
                    <textarea name="brief" placeholder="请填写分组简介" class="layui-textarea typebrief"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updatecate">提交修改</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>

    layui.use(['form', 'layer'], function () {
        var form = layui.form, layer = layui.layer;
        getTypeList();
        
        //删除分类
        $(document).on("click", ".del", function () {
            let url = '<?= site_url('address/del_group') ?>';
            let tid = getId($(this));
            let jsonData = {
                'tid': tid
            };
            request(url,jsonData,getTypeList,layer);
        }) 
        //编辑分类
        $(document).on("click", ".edit-btn", function () {
            let tid = getId($(this));
            let typename = $(this).parents("tr").find('.typename').text();
            let typesort = $(this).parents("tr").find('.typesort').text();
            let typebrief = $(this).parents("tr").find('.typebrief').text();
            $("#edit form .typename").val(typename);
            $("#edit form .typesort").val(typesort);
            $("#edit form .typebrief").val(typebrief);
            $("#edit form .typeid").val(tid);
            layer.open({
                'type':1,
                'title':'修改分类信息',
                'content':$('#edit'),
                'area':['600px','400px']
            });
        })
        //修改分类
        form.on('submit(updatecate)', function (data) {
            let url = '<?= site_url('address/edit_group') ?>';
            let type = data.field.type;
            let sort = data.field.sort;
            let brief = data.field.brief;
            let tid = data.field.tid;
            let jsonData = {
                'type': type,
                'sort': sort,
                'brief': brief,
                'tid':tid
            };
            request(url,jsonData,getTypeList,layer);
            return false;
        });
        //添加分组
        form.on('submit(addcate)', function (data) {
            let url = '<?= site_url('address/addgroup') ?>';
            let type = data.field.type;
            let sort = data.field.sort;
            let brief = data.field.brief;
            let jsonData = {
                'type': type,
                'sort': sort,
                'brief': brief
            };
            request(url,jsonData,getTypeList,layer);
            return false;
        });

    });

</script>
<script>
    function getTypeList() {
        let url = '<?= site_url("address/get_group_list") ?>';
        $.get(url, function (redata) {
            console.log(redata);
            let str = '';
            for (x in redata.datalist) {
                let num = parseInt(x) + 1;
                str += '<tr tid="' + redata.datalist[x].id + '"><td>' + num + '</td><td class="typename">' + redata.datalist[x].name + '</td><td class="typebrief">' + redata.datalist[x].brief + '</td><td class="typesort">' + redata.datalist[x].sort + '</td><td>' + redata.datalist[x].create_time + '</td><td><div class="layui-btn-group"><button class="layui-btn layui-btn-normal layui-btn-xs edit-btn"><i class="layui-icon">&#xe642;</i>编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs del" ><i class="layui-icon">&#xe640;</i>删除</button></div></td></tr>'
            }
            $(".data-table tbody").html(str);
        }, 'json');

    }
</script>

</html>